<template>
  <view class="content">
    <!-- 左侧导航栏 -->
    <scroll-view scroll-y class="left-aside" show-scrollbar="false">
      <view
        v-for="(item, index) in tabs"
        :key="index"
        class="f-item"
        :class="{ active: index == currentId }"
        @click="tabtap(item, index)"
      >
        <view class="before"></view>
        {{ item.Column_Name }}
      </view>
    </scroll-view>
    <!-- 右侧 -->
    <view class="right-aside">
      <!-- 2级分类 -->
      <view class="flex align-center shadow">
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view class="flex align-center">
            <view
              @click="subtabtap(item)"
              v-for="(item, index) in tabs[currentId].data"
              class="mx-2 font border-bottom"
              :key="index"
              :class="
                item.Category_SerialNumber == form.Category_SerialNumber
                  ? 'text-info border-info'
                  : 'border-white'
              "
            >
              {{ item.Category_Name }}
            </view>
          </view>
        </scroll-view>
        <view class="px-2">
          <uni-icons type="list" size="20" @click="toggle('top')"></uni-icons>
        </view>
      </view>
      <!-- 筛选 -->
      <view class="assistant font">
        <view class="font text-info">{{ Category_Name }}</view>
        <view class="flex">
          <view class="ml-1">销量</view>
          <view class="ml-1">价格</view>
          <view>
            <view></view>
            <view></view>
          </view>
        </view>
      </view>
      <!-- 商品信息 -->
      <scroll-view
        scroll-with-animation
        scroll-y
        @scrolltolower="loadMoreData"
        class="foot"
		style="padding: 0px 0 120rpx 0; box-sizing: border-box;"
      >
        <view
          class="flex align-center w-100 mb-2"
          style="position: relative"
          v-for="(item, index) in tableData"
          :key="index"
          @click="
            handleDetails(
              item.Article_SerialNumber,
              item.Sales_Unit_Price_SerialNumber,
              item.Store_SerialNumber,
              item.specifications[0].Sales_Unit_Price
            )
          "
        >
          <view
            class="rounded flex-shrink mr-2"
            style="width: 180rpx; height: 180rpx"
          >
            <image
              :src="Domain_IMG + item.Picture_URL"
              mode=""
              style="width: 180rpx; height: 180rpx"
			  :lazy-load="true"
            />
          </view>
          <view
            class="font flex flex-column justify-between"
            style="height: 180rpx"
          >
            <view
              class="font font-weight-bold text-ellipsis"
              style="width: 300rpx"
              >{{ item.Article_Name }}</view
            >
            <view class="font-sm text-muted flex">
              <view>库存: {{ item.specifications[0].Stock_Remain }}</view>
              <view class="ml-2"
                >销量: {{ item.specifications[0].Stock_Sell }}</view
              >
            </view>
            <view class="flex">
              <view class="font-md text-info font-weight-bolder mr-8"
                >¥{{ item.specifications[0].Sales_Unit_Price }}</view
              >
            </view>
          </view>
          <view
            v-if="
              !Car.some(
                (i) => i.Article_SerialNumber == item.Article_SerialNumber
              )
            "
            class="rounded-circle bg-info text-white flex justify-center align-center"
            style="
              position: absolute;
              right: 20rpx;
              bottom: 0;
              width: 60rpx;
              height: 60rpx;
            "
            @click.stop="
              addShopCar(
                item.Store_SerialNumber,
                item.specifications[0].Sales_Unit_Price,
                item.specifications[0].Sales_Unit_Price_Stock_SerialNumber,
                item.Article_SerialNumber,
                item.specifications[0].Article_Specifications_SerialNumber,
                item.specifications[0].Unit_Price
              )
            "
          >
            <uni-icons type="cart" size="20" color="#fff"></uni-icons>
          </view>
          <view
            v-else
            class="flex justify-center align-center rounded-circle"
            style="position: absolute; right: 20rpx; bottom: 0"
          >
            <view
              @click.stop="subGoods(item.Article_SerialNumber)"
              class="font-md text-center text-white flex justify-center align-center"
              :style="{ backgroundColor: '#17a2b8' }"
              style="width: 50rpx; height: 50rpx"
              >-</view
            >
            <view
              class="text-center font bg-white border"
              style="width: 50rpx; height: 50rpx"
              :style="'border-top:1rpx solid #17a2b8;border-bottom:1rpx solid #17a2b8; color:#17a2b8; box-sizing: border-box;'"
            >
              {{
                parseInt(
                  Car.filter(
                    (i) => i.Article_SerialNumber == item.Article_SerialNumber
                  )[0].Quantity
                )
              }}
            </view>
            <view
              @click.stop="addGoods(item.Article_SerialNumber)"
              class="font-md text-center text-white flex justify-center align-center"
              :style="{ backgroundColor: '#17a2b8' }"
              style="width: 50rpx; height: 50rpx"
              >+</view
            >
          </view>
        </view>
        <view v-if="isbottom" class="flex justify-center">
          <text class="font-sm text-muted">已经到底了</text>
        </view>
      </scroll-view>
    </view>
    <!-- 展开 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="">
        <text class="font font-weight-bold ml-2">全部分类</text>
      </view>
      <view
        class="popup-content"
        :class="{ 'popup-height': type === 'left' || type === 'right' }"
      >
        <view
          @click="subtabtap(item)"
          v-for="(item, index) in tabs[currentId].data"
          :key="index"
          style="width: 20%; height: 60rpx; display: inline-block; float: left"
          class="flex justify-center"
        >
          <text
            style="width: 80%; display: block"
            class="text-ellipsis font-sm"
            :class="
              item.Category_SerialNumber == form.Category_SerialNumber
                ? 'text-info'
                : ''
            "
            >{{ item.Category_Name }}</text
          >
        </view>
      </view>
    </uni-popup>
    <!-- 底部切换 -->
    <tabsBottom :tabId="1"></tabsBottom>
  </view>
</template>
<script>
const app = getApp();
import tabsBottom from "@/components/tabs/tabs-bottom.vue";
import {
  WXClassifyAction,
  WX2GoodsIdAction,
  WXEditShopCarQuantity,
} from "@/api/article.js";
import { WXShopCarQuantity } from "@/api/WeChat.js";
import { NowTime } from "@/static/js/DateUtil.js";
export default {
  components: {
    tabsBottom,
  },
  data() {
    return {
      Domain_IMG: app.globalData.Domain_IMG, //全局变量域名
      isbottom: false,
      Category_Name: "全部",
      Car: [], //购物车
      currentId: 0, //1级分类索引
      form: {
        ShopColumn_Id: "",
        Category_SerialNumber: "",
        page: 1,
        limit: 10,
      },
      total: 0, //条数
      tabs: [], //类目
      tableData: [],
      type: "center",
      msgType: "success",
      messageText: "这是一条成功提示",
      value: "",
      loading: false,
    };
  },
  onLoad() {
    // this.loadData();
    this.getData();
  },
  methods: {
    toggle(type) {
      this.type = type;
      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      this.$refs.popup.open(type);
    },
    async getData() {
      const res = await WXClassifyAction({
        App_ID: app.globalData.appid,
        Enterprise_Info_SerialNumber: app.globalData.enterprise,
      });
      if (res.Status == "success") {
        this.tabs = res.Data;
        this.getList(this.form);
      }
    },
    async getList(data, bol = false) {
      const res = await WX2GoodsIdAction(data);
      if (res.Status == "success") {
        if (bol) {
          this.tableData.push(...res.tableData);
        } else {
          this.tableData = res.tableData;
          this.total = parseInt(res.limit);
          this.ShopGoods();
        }
      }
    },
    async subGoods(Article_SerialNumber) {
      if (this.loading) return;
      uni.showLoading({
        title: "提交中...",
      });
      this.loading = true;
      const res = await WXEditShopCarQuantity({
        Article_SerialNumber,
        Open_ID: app.globalData.openid,
        Type: 0,
      });
      this.loading = false;
      if (res.Status == "success") {
        const res1 = await WXShopCarQuantity({
          App_ID: app.globalData.appid,
          Open_ID: app.globalData.openid,
          Enterprise_Info_SerialNumber: app.globalData.enterprise,
        });
        if (res1.Status == "success") {
          res1.Data.forEach((item) => {
            this.total = this.total + parseInt(item.Quantity);
          });
          this.Car = res1.Data;
          uni.hideLoading();
        }
      }
    },
    async addGoods(Article_SerialNumber) {
      if (this.loading) return;
      uni.showLoading({
        title: "提交中...",
      });
      this.loading = true;
      const res = await WXEditShopCarQuantity({
        Article_SerialNumber,
        Open_ID: app.globalData.openid,
        Type: 1,
      });
      this.loading = false;
      if (res.Status == "success") {
        const res1 = await WXShopCarQuantity({
          App_ID: app.globalData.appid,
          Open_ID: app.globalData.openid,
          Enterprise_Info_SerialNumber: app.globalData.enterprise,
        });
        if (res1.Status == "success") {
          res1.Data.forEach((item) => {
            this.total = this.total + parseInt(item.Quantity);
          });
          this.Car = res1.Data;
          uni.hideLoading();
        }
      }
    },
    async ShopGoods() {
      const res = await WXShopCarQuantity({
        App_ID: app.globalData.appid,
        Open_ID: app.globalData.openid,
        Enterprise_Info_SerialNumber: app.globalData.enterprise,
      });
      if (res.Status == "success") {
        res.Data.forEach((item) => {
          this.total = this.total + parseInt(item.Quantity);
        });
        this.Car = res.Data;
      }
    },
    loadMoreData() {
      //下拉加载
      if (this.tableData.length < this.total) {
        uni.showLoading({
          title: "加载中",
        });
        this.form.page++;
        this.getList(this.form, true);
        uni.hideLoading();
      } else {
        this.isbottom = true;
      }
    },
    tabtap(item, index) {
      //一级分类点击
      this.currentId = index;
      this.form.ShopColumn_Id = item.ShopColumn_Id;
      this.form.Category_SerialNumber = "";
      this.Category_Name = "全部";
      this.tableData = [];
      this.isbottom = false;
      this.form.page = 1;
      this.getList(this.form);
    },
    subtabtap(item) {
      //二级分类点击
      this.form.Category_SerialNumber = item.Category_SerialNumber;
      this.Category_Name = item.Category_Name;
      this.tableData = [];
      this.isbottom = false;
      this.form.page = 1;
      this.getList(this.form);
    },
    handleDetails(
      Article_SerialNumber,
      Sales_Unit_Price_SerialNumber,
      Store_SerialNumber,
      Sales_Unit_Price
    ) {
      //点击进入"商品详情"页
      uni.navigateTo({
        url:
          "/pages/index/details?Article_SerialNumber=" +
          Article_SerialNumber +
          "&Sales_Unit_Price_SerialNumber=" +
          Sales_Unit_Price_SerialNumber +
          "&Store_SerialNumber=" +
          Store_SerialNumber +
          "&Sales_Unit_Price=" +
          Sales_Unit_Price +
          "&ShareOpenid=" +
          this.ShareOpenID,
      });
    },
    addShopCar(
      Store_SerialNumber,
      Sales_Unit_Price,
      Sales_Unit_Price_Stock_SerialNumber,
      Article_SerialNumber,
      Article_Specifications_SerialNumber,
      Unit_Price
    ) {
      //加入购物车
      if (!this.loading) {
        this.loading = true;
        uni.showLoading({
          title: "提交中...",
        });
        uni.request({
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          url: app.globalData.Domain_Name + "/WXCheckShopCarAction", //
          method: "POST",
          data: {
            Open_ID: app.globalData.openid,
            App_ID: app.globalData.appid,
            Sales_Unit_Price_Stock_SerialNumber,
          },
          success: (res) => {
            if (res.data.length == 0) {
              uni.request({
                header: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
                url: app.globalData.Domain_Name + "/getAddAction?grant_type=wechat_program", //
                method: "POST",
                data: {
                  Data: JSON.stringify({
                    sales_order: [
                      {
                        Sales_Order_SerialNumber: "",
                        Store_SerialNumber: Store_SerialNumber,
                        Sales_Date: NowTime(),
                        Open_ID: app.globalData.openid,
                        Sales_Amount: Sales_Unit_Price,
                        Collection_Amount: 0,
                        Sales_ID: "xiaoshou1",
                        Receive_Type: 0,
                        Refund_Type: 0,
                        Row_Status: 8,
                        App_ID: app.globalData.appid,
                        Enterprise_Info_SerialNumber: app.globalData.enterprise,
                        Children: {
                          sales_order_detail: [
                            {
                              Sales_Order_Detail_SerialNumber: "",
                              Sales_Order_SerialNumber: "",
                              Sales_Unit_Price_Stock_SerialNumber:
                                Sales_Unit_Price_Stock_SerialNumber,
                              Article_SerialNumber: Article_SerialNumber,
                              Article_Specifications_SerialNumber:
                                Article_Specifications_SerialNumber,
                              Sign: "无货货主",
                              Quantity: 1,
                              Unit_Price: Unit_Price,
                              Sales_Unit_Price: Sales_Unit_Price,
                              Amount: Sales_Unit_Price,
                              Receive_Type: 0,
                              Refund_Type: 0,
                              Row_Status: 8,
                              Enterprise_Info_SerialNumber:
                                app.globalData.enterprise,
                            },
                          ],
                        },
                      },
                    ],
                  }),
                  Open_ID: app.globalData.openid,
                },
                success: (res) => {
                  if (res.data.Status == "success") {
                    uni.showToast({
                      title: "已加入购物车！",
                      icon: "none",
                    });

                    this.ShopGoods();
                  } else {
                    uni.showToast({
                      title: "系统繁忙！",
                      icon: "error",
                    });
                  }
                },
                complete: () => {
                  this.loading = false;
                  uni.hideLoading();
                },
              });
            } else {
              this.loading = false;
              uni.hideLoading();
              uni.showToast({
                title: "购物车存在该商品！",
                icon: "none",
              });
            }
          },
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.foot {
  flex: 1;
  height: 200rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #f5f5f5;

  .right {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}

.assistant {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
}

.scroll-view_H {
  flex: 1;
  white-space: nowrap;
  width: 300rpx;
  margin: 20rpx 0;
}

.popup-content {
  padding: 15px;
  height: 200px;
  background-color: #fff;
}

.popup-height {
  width: 200px;
}

page,
.content {
  height: 100%;
  background-color: #f8f8f8;
}

.content {
  display: flex;
}

.left-aside {
  flex-shrink: 0;
  width: 200rpx;
  height: 100%;
  background-color: #f5f5f5;
}

.f-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  font-size: 28rpx;
  position: relative;
}

.active {
  color: #17a2b8;
  background: #fff;

  .before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 36rpx;
    width: 8rpx;
    background-color: #17a2b8;
    border-radius: 0 4px 4px 0;
    opacity: 0.8;
  }
}

.right-aside {
  flex: 1;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
</style>